<template>
	<view>
		<baseHead :title="title" bg="#ffffff" color="#000000"></baseHead>
		<view class="content">
			<view v-for="(item,index) in RankingList" :key="index" class="item_box"
				v-if="xuanzhong==1?index<5:index>=0">
				<view @click="clickDetails(item)">
					<courseCourse :objectData="item">
					</courseCourse>
				</view>

				<!-- 		:style="{'border-top':'41rpx solid'+item.color,'border-left':'21rpx solid'+item.color,
					'border-right':'21rpx solid'+item.color,}" -->
				<view class="shuqian" :style="{'border-top':'41rpx solid'+item.color,'border-left':'21rpx solid'+item.color,
					'border-right':'21rpx solid'+item.color,}">
				</view>
				<view class="xuhao">
					<text style="text-align: center;">{{index+1}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import baseHead from "@/pages/component/baseHead.vue";
	import courseCourse from "@/pages/views/packageD/template/crossCourse1.vue"
	export default {
		data() {
			return {
				title: "热门排行",
				RankingList: [],
				xuanzhong: null, //热门还是top5
			}
		},
		components: {
			baseHead,
			courseCourse
		},
		onLoad(option) {
			if (option) {
				this.title = option.title
				this.xuanzhong = option.xuanzhong
			}
			this.paihang()
		},
		methods: {
			paihang() {
				let obj1 = {
					PageSize: this.PageSize,
					StartTime: this.StartTime
				}
				this.$http.digitalize.courseHot(obj1).then(res => {
					if (res.Success) {
						this.RankingList = this.RankingList.concat(res.Result.map((item, index) => {
							if (index == 0) {
								return {
									...item,
									color: '  #F35370'
								}
							} else if (index == 1) {
								return {
									...item,
									color: '#F36853'
								}
							} else if (index == 2) {
								return {
									...item,
									color: '#F5A130'
								}
							} else {
								return {
									...item,
									color: ' #3476FE'
								}
							}
						}))
					}

				});
			},
			clickDetails(item) {
				if (item.Type >= 0) {
					if (item.Type != 1) {
						uni.navigateTo({
							url: `/pages/views/packageD/type-jobhunting/shuzihua/details?id=${item.CourseId}&index=${item.Type}`,
						});
					} else {
						uni.navigateTo({
							url: `/pages/views/packageD/type-jobhunting/shuzihua/OfflineCourseDetails?id=${item.CourseId}`,
						});
					}
				} else {
					uni.navigateTo({
						url: `/pages/views/packageD/type-jobhunting/shuzihua/details?id=${item.CourseId}&index=${index}`,
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;

		.item_box {
			margin-bottom: 20rpx;
			position: relative;
			background-color: #fff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}


		.shuqian {
			position: absolute;
			border-bottom: 21rpx solid transparent;
			position: absolute;
			z-index: 3;
			top: 20rpx;
			left: 20rpx;
		}

		.xuhao {
			position: absolute;
			display: flex;
			justify-content: center;
			align-items: center;
			top: 22rpx;
			left: 36rpx;
			z-index: 4;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>